<template>
  <div>
    <p>Normal Script Component</p>
    <form @submit.prevent="submit">
      <input type="text" v-model="form.name" />
      <button type="submit">submit</button>
    </form>
  </div>
</template>

<script>
import { reactive } from 'vue'

export default {
  name: 'NormalScriptComponent',
  props: {
    modelValue: {
      type: Object,
      required: true,
    },
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    console.log('setup NormalScriptComponent once')
    const form = reactive({ ...props.modelValue })
    const submit = () => {
      emit('update:modelValue', { ...form })
    }
    return {
      form,
      submit,
    }
  },
}
</script>

<style scoped lang="scss">
form {
  display: flex;
  gap: 8px;
}
</style>
